<template>
	<div class='app-container'>
		<el-form :inline='true' :model='form' label-width='120px' size='mini'>
			<el-form-item label='广告位：' prop='posNo'>
				<el-select v-model='dialogForm.posNo' placeholder='请选择广告位'>
					<el-option v-for='item in positionList' :key='item.posNo' :label='item.name'
						:value='item.posNo'></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label='广告名称：' prop='title'>
				<el-input v-model='form.title' placeholder='请选择广告名称' />
			</el-form-item>
			<el-form-item label='筛选时间：' prop='time'>
				<el-select v-model='form.time'>
					<el-option label='开始时间' value='0' />
					<el-option label='结束时间' value='1' />
				</el-select>
			</el-form-item>
			<el-form-item label='时间：'>
				<el-date-picker v-model='rangeTime' type='datetimerange' start-placeholder='开始' end-placeholder='结束' />
			</el-form-item>
			<el-form-item>
				<el-button icon='el-icon-plus' type='success' @click="handleCommand('add')">新增</el-button>
				<el-button icon='el-icon-search' type='primary' @click='getData'>搜索</el-button>
				<el-button icon='el-icon-refresh' type='danger' @click='clearForm'>重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data='tableData' border size='mini' v-loading='loading' empty-text='暂无数据'>
			<el-table-column label='广告位名称' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.positionName }}</span>
				</template>
			</el-table-column>
			<el-table-column label='标题' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column label='内容' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.content }}</span>
				</template>
			</el-table-column>
			<el-table-column label='封面' align='center'>
				<template slot-scope='scope'>
					<img :src='scope.row.pic' alt='' style='width: 200px; height: 48px;' />
				</template>
			</el-table-column>
			<el-table-column label='链接' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.url }}</span>
				</template>
			</el-table-column>
			<el-table-column label='开始时间' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.startTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label='结束时间' align='center'>
				<template slot-scope='scope'>
					<span>{{ scope.row.endTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label='操作' align='center' class-name="small-padding fixed-width">
				<template slot-scope='scope'>
					<el-button size='mini' type='warning' icon="el-icon-edit"
						@click="handleCommand('edit', scope.row.id)">
						编辑
					</el-button>
					<el-button size='mini' type='danger' icon="el-icon-delete"
						@click="handleCommand('del', scope.row.id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class='page'>
			<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='pageNum'
				:page-sizes='[5, 10, 15]' :page-size='pageSize' layout='total, sizes, prev, pager, next'
				:total='total'></el-pagination>
		</div>
		<el-dialog :title='dialogTitle' :visible.sync='dialogVisible' width='500px' center>
			<el-form ref='dialogForm' :model='dialogForm' label-width='100px' size='mini' :rules='rules'>
				<el-form-item label='广告位：' prop='posNo' width='200px'>
					<el-select v-model='dialogForm.posNo' placeholder='请选择广告位'>
						<el-option v-for='item in positionList' :key='item.posNo' :label='item.name'
							:value='item.posNo'></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label='标题：' prop='title'>
					<el-input v-model='dialogForm.title' />
				</el-form-item>
				<el-form-item label='内容：' prop='content'>
					<el-input v-model='dialogForm.content' />
				</el-form-item>
				<el-form-item label='封面：' prop='pic'>
					<img-upload :imageUrl='dialogForm.pic' :width="width" :height="height" :cicle="cicle"
						:showTip="showTip" @imageUrlChange='imageUrlChange'></img-upload>
				</el-form-item>
				<el-form-item label='链接：' prop='url'>
					<el-input v-model='dialogForm.url' />
				</el-form-item>
				<el-form-item label='开始时间：' prop='startTime'>
					<el-date-picker v-model='dialogForm.startTime' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
						placeholder='选择日期时间'></el-date-picker>
				</el-form-item>
				<el-form-item label='结束时间：' prop='endTime'>
					<el-date-picker v-model='dialogForm.endTime' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
						placeholder='选择日期时间'></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type='primary' @click='submitForm'>提交</el-button>
					<el-button @click='cancel'>取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { ad_page, ad_add, ad_update, ad_del, ad_detail } from '@/api/ad';
import { ad_pos_list } from '@/api/adPos';
import { formatDate } from '@/utils/tools'

export default {
	data() {
		return {
			tableData: [],
			loading: false,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			rangeTime: [],
			form: {
				posNo: undefined,
				title: undefined,
				time: '0',
				timeStartRangeStr: null,
				timeEndRangeStr: null
			},
			positionList: [],
			dialogVisible: false,
			dialogTitle: '',
			cicle: false,
			width: '330px',
			height: '80px',
			showTip: false,
			dialogForm: {
				posNo: undefined,
				title: undefined,
				content: undefined,
				pic: undefined,
				url: undefined,
				startTime: undefined,
				endTime: undefined
			},
			rules: {
				posNo: [{ required: true, message: '请选择广告位', trigger: 'change' }],
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
				startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
				endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
			}
		}
	},
	created() {
		this.getData();
		this.getPos();
	},
	methods: {
		async getPos() {
			const res = await ad_pos_list();
			this.positionList = res;
		},
		async getData() {
			this.loading = true;
			this.form.pageNum = this.pageNum;
			this.form.pageSize = this.pageSize;
			if (this.rangeTime.length > 0) {
				const timeStartRangeStr = formatDate(this.rangeTime[0], 'yyyy-MM-dd HH:mm:ss')
				const timeEndRangeStr = formatDate(this.rangeTime[1], 'yyyy-MM-dd HH:mm:ss')
				this.form.timeStartRangeStr = timeStartRangeStr
				this.form.timeEndRangeStr = timeEndRangeStr
			}
			const res = await ad_page(this.form);
			this.tableData = res.records;
			this.total = Number.parseInt(res.total);
			this.loading = false;
		},
		/**
		 * 改变每页大小
		 */
		handleSizeChange(e) {
			this.pageSize = e;
			this.getData();
		},
		/**
		 * 改变当前页
		 */
		handleCurrentChange(e) {
			this.pageNum = e;
			this.getData();
		},
		clearForm() {
			this.form = {
				posNo: undefined,
				title: undefined,
				time: '0'
			}
			this.rangeTime = []
			this.getData()
		},
		handleCommand(command, id) {
			this.resetForm()
			if (command === 'add') {
				this.dialogTitle = '新增广告';
				this.dialogVisible = true;
			} else if (command === 'edit') {
				this.dialogTitle = '编辑广告';
				this.reqdetail(id);
				this.dialogVisible = true;
			} else if (command === 'delete') {
				this.deletedOpt(id);
			}
		},
		imageUrlChange(url) {
			this.dialogForm.pic = url;
		},
		deletedOpt(id) {
			this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const res = await ad_del(id);
				this.$message.success(res);
				this.getData();
			})
		},
		async reqdetail(id) {
			const res = await ad_detail(id);
			this.dialogForm = res;
		},
		async submitForm() {
			const validateRes = await this.$refs.dialogForm.validate;
			if (validateRes) {
				let res;
				if (this.dialogForm.id) {
					res = await ad_update(this.dialogForm);
				} else {
					res = await ad_add(this.dialogForm);
				}
				this.$message.success(res);
				this.dialogVisible = false;
				this.getData();
			}
		},
		cancel() {
			this.dialogVisible = false;
		},
		resetForm() {
			this.dialogForm = {
				posNo: undefined,
				title: undefined,
				content: undefined,
				url: undefined,
				startTime: undefined,
				endTime: undefined
			}
		}
	}
};
</script>

<style lang='less' scoped></style>
